<template>
  <div class="L-jhgl-item" @click="toCard">
    <van-row type="flex" justify="space-between" align="center">
      <van-col>
        <span class="L-bold-text">
          {{item.jhgl_mudi}}
        </span>
      </van-col>
      <van-col style="text-align: right;">
        <span class="L-small-text">客户数量:{{item.jhgl_khs}}</span>
        <i class="iconfont icon-jiufuqianbaoicon07 L-mini-text L-margin-left-10"></i>
      </van-col>
    </van-row>

    <van-divider />
    <van-row type="flex" justify="space-between" >
      <van-col>
        <div class="L-small-text L-secondary-text-color">
          开始时间:{{formatDate(item.jhgl_kssj)}}
        </div>
        <div class="L-small-text L-secondary-text-color">
          结束时间:{{formatDate(item.jhgl_jssj)}}
        </div>
        <div class="L-small-text L-secondary-text-color">
          执行周期:{{formatPeriod(item.jhgl_zqlxpq_enum, item.jhgl_zqlx_enum, item.jhgl_pqz)}}
        </div>
      </van-col>
      <van-col class="L-text-align-right">
        <div class="L-small-text">
          状态 : <span style="color:#ee8700">{{item.jhgl_status_enum}}</span>
        </div>
        <div class="L-margin-top-20">
            <van-tag v-if="item.jhgl_jhscbylx_enum == '路线内'"  style="margin-right:10px" color="#fbf1ec" text-color="#f57746" size="medium" round >路线</van-tag>
            <van-tag v-if="item.jhgl_zqlx_enum==='单次'"   color="#fef6ec" text-color="#f56c6c" size="medium" round> {{item.jhgl_zqlx_enum}} </van-tag>
            <van-tag v-if="item.jhgl_zqlx_enum==='周期'"  color="#f0f9ec" text-color="#67c33a" size="medium" round> {{item.jhgl_zqlx_enum}} </van-tag>
        </div>

      </van-col>
    </van-row>

    <van-divider />

    <van-row type="flex" justify="space-between" align="center">
      <van-col :span="8"><span class="L-small-text ">执行人: {{item.jhgl_idowner_ref}}</span></van-col>
      <van-col :span="8"><span class="L-small-text ">创建人:{{item.jhgl_createdby_ref}}</span></van-col>
      <van-col :span="8"><span class="L-small-text ">协访人: {{item.jhgl_xiefangby_ref ? item.jhgl_xiefangby_ref :'无'}}</span></van-col>

    </van-row>
  </div>

</template>
  
  <script setup lang="ts">
import { onMounted, ref, defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },

  idobject: {
    type: String,
    default: "",
  },
});

function toCard() {
  const { item, idobject } = props;
  router.push({
    path: "/jhglCard",
    query: {
      itemid: item[`${idobject}_id`],
      idobject,
      item:JSON.stringify(item)
    },
  });
}
function formatPeriod(pqlx:string, zqlx:string, pqz:string) {
  if (zqlx == "周期") {
    if (pqlx == "按周排期") {
      return "每周 周" + pqz;
    }
    return "每月 " + pqz;
  }
  return "无";
}
function formatDate(dateString:string) {
  if (!dateString) return "";
  const date = new Date(dateString);
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "Asia/Shanghai",
  };
  return date
    .toLocaleDateString("zh-CN", options)
    .replace(/年(\d{1,2})月/, "年$1月")
    .replace(/日$/, "日");
}
</script>
  
  <style scoped>
.L-jhgl-item {
  padding: 10px;
  background: #fff;
  margin: 10px auto;
}
</style>